<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哔哩哔哩赛事中心</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "微软雅黑", sans-serif;
        }
        .header {
            background: #0f0f0f;
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .nav-links a {
            color: white;
            text-decoration: none;
            margin-left: 20px;
        }
        .search-box {
            display: flex;
            align-items: center;
            background: #333;
            border-radius: 20px;
            padding: 5px 15px;
        }
        .search-box input {
            background: transparent;
            border: none;
            color: white;
            padding: 8px;
            width: 200px;
        }
        .search-box button {
            background: transparent;
            border: none;
            color: white;
            cursor: pointer;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px 20px;
        }
        .banner {
            background: url(./image/lol.avif) no-repeat center/cover;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            margin-bottom: 40px;
        }
        .banner h1 {
            font-size: 36px;
            margin-bottom: 20px;
        }
        .banner p {
            font-size: 18px;
            color: #ffd700;
        }
        .game-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        .game-item {
            background: #f8f8f8;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.3s;
        }
        .game-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .game-item img {
            width: 80px;
            height: 80px;
            margin-bottom: 10px;
        }

        .schedule {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
        }
        .match-result, .match-preview {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .schedule h3 {
            color: #333;
            margin-bottom: 15px;
        }
        .match-item {
            padding: 10px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .match-item:last-child {
            border-bottom: none;
        }
        .team {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
        }
        .result {
            color: #ff6600;
        }
        .preview-time {
            color: #666;
            font-size: 0.9em;
        }

        @media (max-width: 768px) {
            .schedule {
                grid-template-columns: 1fr;
            }
            .game-list {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="nav-links">
            主站
            赛事中心
        </div>
        <div class="search-box">
            <input type="text" placeholder="搜索赛事/游戏">
            <button>搜索</button>
        </div>
    </header>

    <div class="container">
        <div class="banner">
            <div>
                <h1>2025英雄联盟职业联赛第二赛段</h1>
                <p>无畏竞巅峰 | 5月29日-8月18日</p >
            </div>
        </div>

        <h2 style="font-size: 24px; color: #333; margin-bottom: 20px;">热门电竞游戏</h2>
        <div class="game-list">
            <div class="game-item">
                <img src="https://ts1.tc.mm.bing.net/th/id/R-C.a8e8667219c64eea7580b7ab5bfc0724?rik=QWAmtkki5mxjzQ&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20220106ac%2f600%2fw1920h1080%2f20220106%2f3e1f-03fc1c4c543d4b5464af789c5d6d7e67.jpg&ehk=ASwMupC%2b5NBKRjM4i%2bnNYPXBTWbd3Og0%2fj70wMobdxQ%3d&risl=&pid=ImgRaw&r=0" alt="">
                <p>英雄联盟</p >
            </div>
            <div class="game-item">
                <img src="https://ts1.tc.mm.bing.net/th/id/R-C.a8e8667219c64eea7580b7ab5bfc0724?rik=QWAmtkki5mxjzQ&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20220106ac%2f600%2fw1920h1080%2f20220106%2f3e1f-03fc1c4c543d4b5464af789c5d6d7e67.jpg&ehk=ASwMupC%2b5NBKRjM4i%2bnNYPXBTWbd3Og0%2fj70wMobdxQ%3d&risl=&pid=ImgRaw&r=0" alt="">
                <p>王者荣耀</p >
            </div>
            <div class="game-item">
                <img src="https://ts1.tc.mm.bing.net/th/id/R-C.a8e8667219c64eea7580b7ab5bfc0724?rik=QWAmtkki5mxjzQ&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20220106ac%2f600%2fw1920h1080%2f20220106%2f3e1f-03fc1c4c543d4b5464af789c5d6d7e67.jpg&ehk=ASwMupC%2b5NBKRjM4i%2bnNYPXBTWbd3Og0%2fj70wMobdxQ%3d&risl=&pid=ImgRaw&r=0" alt="">
                <p>无畏契约</p >
            </div>
            <div class="game-item">
                <img src="https://ts1.tc.mm.bing.net/th/id/R-C.a8e8667219c64eea7580b7ab5bfc0724?rik=QWAmtkki5mxjzQ&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20220106ac%2f600%2fw1920h1080%2f20220106%2f3e1f-03fc1c4c543d4b5464af789c5d6d7e67.jpg&ehk=ASwMupC%2b5NBKRjM4i%2bnNYPXBTWbd3Og0%2fj70wMobdxQ%3d&risl=&pid=ImgRaw&r=0" alt="">
                <p>守望先锋</p >
            </div>
        </div>

        <div class="schedule">
            <div class="match-result">
                <h3>英雄联盟赛事结果</h3>
                <div class="match-item">
                    <div class="team">
                        <span>JDG</span>
                        <span class="result">2 - 0</span>
                        <span>BLG</span>
                    </div>
                    <p>5月28日 15:00</p >
                </div>
                <div class="match-item">
                    <div class="team">
                        <span>WBG</span>
                        <span class="result">1 - 2</span>
                        <span>EDG</span>
                    </div>
                    <p>5月27日 16:00</p >
                </div>
            </div>
            <div class="match-preview">
                <h3>守望先锋冠军系列赛</h3>
                <div class="match-item">
                    <p class="preview-time">6月2日 14:00</p >
                    <div class="team">
                        <span>上海龙之队</span>
                        <span vs >VS</span>
                        <span>达拉斯燃料队</span>
                    </div>
                </div>
                <div class="match-item">
                    <p class="preview-time">6月3日 14:00</p >
                    <div class="team">
                        <span>杭州闪电队</span>
                        <span vs >VS</span>
                        <span>洛杉矶角斗士队</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>